<template>
  <div class="container right-panel-active">

    <!-- Sign In -->
    <div class="signin">
      <form action="#" class="form" id="form2">
        <br>
        <h2 class="form__title">登录</h2>
        <div class="inputToLeft">
        <span>用户名:</span><input type="text" placeholder="userCode" class="input" v-model="input.userCode" /><br>
        <span>密码:<span v-html="'\u00a0\u00a0\u00a0'"></span></span><input type="password" placeholder="password" class="input" v-model="input.password"/><br>
        </div>
        <span>电话:<span v-html="'\u00a0\u00a0\u00a0'"></span></span><input type="text" placeholder="phone" class="input" v-model="verify.phone"/>
        <button class="btn" @click="send()">发送验证码</button>
        <br>
        <div class="inputToLeft">
          <span>验证码:</span><input type="text" placeholder="captcha" class="input" v-model="yzm"/>
        </div>
        <br>

        <button class="btn" @click="signIn()" @keydown.enter="signIn()">登录</button>
      </form>
    </div>
  </div>
</template>

<script>
import instance from "../../utils/request";
import axios from "axios";

export default {
  name: "Login",
  data(){
    return{
      input:{},
      verify:{},
      yzm:'',
      flag:false,
    }
  },
  methods:{
    send(){
      if (this.verify.phone!=null){
        this.verify.captcha=this.rand(1000,9999);
        //发送验证码
        // axios.get('https://api.smsbao.com/sms?u=tsw2002&p=c4fa040e6b6047da9c2bf7e8d3f2630d&m='+this.verify.phone+'&c=【大计信息】您的验证码是'+this.verify.captcha+',30秒内有效');
        // this.$message("验证码已发送到手机号，请注意查收");
        this.$message("验证码："+this.verify.captcha);
      }
    },
    rand(min,max) {
      return Math.floor(Math.random() * (max - min)) + min;
    },
    signIn(){
      if (this.yzm == this.verify.captcha){
        this.$message("验证码正确");
        this.flag = true;
      }else {
        this.$message("验证码错误");
        this.flag = false;
      }
      if (this.flag){
        instance.post('/user/login',this.input).then(res=>{
          if (res.data.success){
            this.$store.commit('setRoleId',res.data.roleId);
            this.$store.commit('setEmpName',res.data.empName);
            this.$message('登录成功!');
            this.$router.push({name:'Index'});
          }else {
            this.$message('登录失败!');
          }
        });
      }
    },
    signUp(){
      instance.post("/user",this.user).then(res=>{

      })
    }
  }
}
</script>

<style scoped>
*{
  margin:0;
  padding: 0;
}

.signin{
  width: 550px;
  height: 500px;
  margin:  auto;
  border-radius: 5px;
  box-shadow: 5px 5px 6px #B3C0D1 ;
  background-image: linear-gradient(to bottom right,  #30cfd0, #B3C0D1);

}
.input{
  width: 350px;
  height: 40px;
  margin-top: 25px;
  border-radius: 5px;
  margin-left: 20px;
}
.btn{
  margin-top: 25px;
  width: 80px;
  height: 45px;
  border-radius: 5px;
}
.inputToLeft{
  position: relative;
  left: -40px;
}
</style>
